<!-- 充值积分页面 -->
<template>
  <view class="my-integral-padding">
	    <block v-if="vip==true">
			<Integral :points="points" :this_month="this_month" />
			<p class="detail">{{ $t('积分充值') }}</p>
			<!-- 选择金额 -->
			<view class="_list">
			  <ol>
				<li v-for="(item,key,index) in list" :key="index" :class="result==index?'bianse':''"
					@click="clickClass(key,index)">
				  <view class="li-text">
					{{ item }}  ( {{ $t('积分币') }} )
				  </view>
				  <view class="li-money">
					￥{{ key }}
				  </view>
				</li>
			  </ol>
			</view>
			<!--充值说明-->
			<p class="detail">{{ $t("充值说明") }}</p>
			<view class="explain">
			  <view v-for="(item,index) in explain" :key="index" class="explain-text">
				<text style="margin-right: 10rpx;">{{ index + 1 }}.</text>
				<text>{{ item.text }}</text>
			  </view>
			</view>
			<!-- 按钮 -->
			<view class="layout">
			  <!-- 站位，用于自适应 -->
			  <view class="" style="height: 2rpx; width: 100%;"></view>
			  <!--  -->
			  <u-button :custom-style="customStyle" hover-class="none" type="primary" @click="doBuy">
				{{ $t('立即充值') }}
			  </u-button>
			</view>
			<payType v-if="showPayType" :show="showPayType" @close="closePayType" @change="changePayType" />
		</block>
		
		<block v-if="vip==false">
			
			<view class="popup-warp" >
				<image :src="HTTP_IMG_UTL+'/quanxian.png'" style="border-radius: 0px;width: 80%; margin-left: 10%; margin-top: 30%;"></image>
			</view>
			
		</block>
  </view>
</template>

<script>
import Integral from '@/pages/user/element/element.vue'
import {getOpenid} from '@/common/public'
import payType from "@/components/payType.vue";
import { IMAGE_URL,HTTP_IMG_UTL } from '@/config/app';

export default {
  data() {
    return {
      customStyle: {
        width: '656rpx',
        height: '63rpx',
        background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
        'border-radius': '26rpx',
      },
      explain: [
        {
          text: this.$t('积分可用于参与竞标，一天之内前两次参加免费， 第三次往后参与一个扣10积分，如果为平台会员 则不扣分，免费参与')
        },
        {
          text: this.$t('积分可用于推广置顶，置顶一次扣50个积分')
        }
      ],
      list: [],
      current: "3",
      points: 0,
      this_month: 0,
      result: null,
      showPayType: false,
      pay_type: '',
      plat: '',
	  
	  HTTP_IMG_UTL,
	  vip:false
    };
  },
  components: {
    Integral,
    payType
  },
  async onLoad() {
    // 判断是否授权过
    this.openid = await getOpenid(this.$u)
    this.getScoreTotals()
    await this.$onLaunched;
    this.list = getApp().globalData.site.scoreConfig
    this.plat = uni.getStorageSync('plat')
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("我的积分")
    })
	
	this.$u.api.user.appCheck().then(res => {
		this.report = res.report
		this.vip = res.vip
	})
  },
  methods: {
    clickClass(value, index) {
      this.result = index
      this.current = value
    },
    //我的积分
    getScoreTotals() {
      this.$u.api.user.getScoreTotal().then(res => {
        this.points = res.total
        this.this_month = res.this_month
      })
    },
    closePayType() {
      this.showPayType = false
    },
    changePayType(e) {
      this.pay_type = e
      this.doBuy()
    },
    doBuy() {
      const that = this
      if (!that.list[that.current]) {
        that.$u.toast('请选择积分项')
        return
      }
      if (that.plat === 'web') {
        that.$u.toast(this.$t('请在小程序或App中支付'))
        return
      }
      if (that.pay_type === '') {
        this.showPayType = true
        return
      }
      that.$u.api.user.scoreOrder({
        openid: that.openid,
        price: that.current,
        //price: 0.01,
        score: that.list[that.current],
        method: that.plat,
        pay_type: that.pay_type
      }).then(res => {
        if (that.plat === 'mp-weixin') {
          uni.requestPayment({
            provider: that.pay_type,
            timeStamp: res.timeStamp,
            nonceStr: res.nonceStr,
            package: res.package,
            signType: res.signType,
            paySign: res.paySign,
            success: function (res) {
              console.log('success:' + JSON.stringify(res));
              that.$u.toast(that.$t('操作成功'))
              setTimeout(() => {
                that.$u.route({
                  url: '/pages/tabbar/user/index',
                  type: 'switchTab'
                })
              }, 2000)
            },
            fail: function (err) {
              console.log('fail:' + JSON.stringify(err));
              that.$u.toast("交易取消")
            }
          });
        } else if (that.plat === 'app') {
          uni.requestPayment({
            provider: that.pay_type,
            orderInfo: res, // 微信-支付宝订单数据
            success: (res) => {
              console.log('success-score-order:' + JSON.stringify(res));
              that.$u.toast(that.$t('操作成功'))
              setTimeout(() => {
                that.$u.route({
                  url: '/pages/tabbar/user/index',
                  type: 'switchTab'
                })
              }, 2000)
            },
            fail: (err) => {
              console.log('fail:' + JSON.stringify(err));
              that.$u.toast("交易取消")
            },
          });
        }
      })
    }
  },

}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: #f0f0f0;
}

.detail {
  padding-left: 12rpx;
  font-size: 28rpx;

  color: rgba(0, 0, 0, 0.88);
  line-height: 38rpx;
  margin: 27rpx 0 27rpx 0;
  font-weight: 600;
}

._list {

  ol {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(3,30%);
    justify-content: space-between;
    grid-gap: 30rpx 0;
    padding: 0;
    max-height: 369rpx;
    li {
      width: 211rpx;
      min-height: 171rpx;
      background: #FFFFFF;
      box-shadow: 3rpx 9rpx 7rpx 0rpx rgba(225, 225, 225, 0.5);
      border-radius: 14rpx;
      color: rgba(0, 0, 0, 0.88);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .li-text {
        padding: 0 20rpx 0 20rpx;
        width: 100%;
        overflow: hidden;
        word-wrap: break-word;
        text-align: center;
        font-size: 28rpx;
        font-weight: 600;
        line-height: 44rpx;
        margin-bottom: 13rpx;
      }

      .li-money {
        font-size: 49rpx;
        font-weight: bold;
        line-height: 49rpx;
        letter-spacing: 1px;
      }
    }
  }
}

.li-color {
  background: linear-gradient(137deg, #DD2910 0%, #F79929 100%) !important;
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(240, 240, 240, 0.5) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-radius: 14rpx !important;
}

.explain {
  margin-left: 35rpx;
  width: 595rpx;
  font-size: 24rpx;

  font-weight: 400;
  color: rgba(162, 162, 162, 0.88);
  line-height: 31rpx;
}

.explain-text {
  display: flex;
  margin-bottom: 10rpx;
}

.bianse {
  color: $my-font-white !important;
  background: linear-gradient(137deg, #DD2910 0%, #F79929 100%) !important;
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(240, 240, 240, 0.5) !important;
  border-radius: 14rpx !important;
}
</style>
